<template>
    <div>
        <p>Dashboard: {{ dashboardField.value }}</p>
        <p>globalValidators 数量：{{ validatorsCount }}</p>
        <button ui="strong" @click="onClick">注销输入框</button>
        <button ui="strong" @click="logoffSelf">注销自己</button>
        <button ui="strong" @click="add">自增</button>
    </div>
</template>
<script>
import {get} from 'lodash';
import {defineComponent, computed} from 'vue';
import {useField, useFormInject} from '../src/hooks';

export default defineComponent({
    setup(props, {emit}) {
        const {field: dashboardField} = useField({
            name: 'dashboard',
            defaultValue: 0
        });
        const form = useFormInject();
        const inputValue = computed(() => get(form.values, 'options.0.test.address'));
        const onClick = () => {
            emit('logoff-input');
        };
        const logoffSelf = () => {
            emit('logoff-self');
        };

        const add = () => {
            const val = dashboardField.value + 1;
            dashboardField.setValue(val);
        };

        return {
            inputValue,
            logoffSelf,
            dashboardField,
            onClick,
            add
        };
    }
});
</script>
